<template>
  <div class="comment_send_box">
    <div class="comment_send_avatar"><el-avatar :src="currentUser.user.portrait"></el-avatar></div>
    <div class="comment_send_textarea">
        <el-input type="textarea" :rows="5" :cols="80" resize='none'
            :placeholder="placeholder" v-model="comment"></el-input>
        </div>
    <div class="comment_send_btn"><el-button @click="doComment">评论</el-button></div>
  </div>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    
  },
  props:{
      placeholder: String,
      
  },
  data() {
    return {
      comment: '',
    }
  },
  methods: {
    // 暴露 用户输入的内容
    doComment(){
      if(this.comment.trim() === ''){
        this.$message({
          type: "error",
          message: "请输入内容!",
        });
        return ;
      }
      console.log("comment-send", this.comment)
      this.$emit("commentSubmitEvent", this.comment);
      this.comment = '';
    }
  },
}
</script>

<style>
.comment_send_box{
    display: flex;
}
.comment_send_avatar{
    margin: 0 20px 0 0;
}
.comment_send_textarea textarea{
    /* width: 420px; */
    height: 65px;
}
.comment_send_btn button{
    height: 65px;
    margin-left: 10px;
}
</style>